<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ayiFont</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- 头部导航 -->
  <nav class="nav">
    <ul class="nav-list">
      <li><a href="#ayi">关于</a></li>
      <li><a href="#demo">项目</a></li>
      <li><a href="#more">更多</a></li>
    </ul>
  </nav>
  <!-- 个人介绍 -->
  <section id="ayi">
    <h1>Hey I am Ayi</a></h1>
    <!-- <p>a web developer</p> -->
    <button>
      <span><a href="./otherHtml/me.html">了解更多</a></span>
      <div class="btn"></div>
    </button>
  </section>
  <!-- 项目 -->
  <section id="demo">
    <h2 class="demo-title">我的一些项目</h2>
    <div class="content">
      <div class="box">
        <img class="box-img" src="./img/echarts.jpg" alt="">
        <p class="box-font"> 数据echarts大屏</p>
      </div>
      <div class="box">
        <img class="box-img" src="./img/manage.jpg" alt="">
        <p class="box-font">用户管理系统</p>
      </div>
      <div class="box">
        <img class="box-img" src="./img/jsxt.jpg" alt="">
        <p class="box-font"> 与c/s端的协同业务平台</p>
      </div>
      <div class="box">
        <img class="box-img" src="./img/diaodu.png" alt="">
        <p class="box-font"> 智能调度系统</p>
      </div>
    </div>
  </section>
  <!-- 更多 -->
  <section id="more">
    <h2 class="more-title">了解更多？</h2>
    <p>活跃在流行的博客论坛和代码仓库</p>
    <a href="https://blog.csdn.net/qq_45163356?type=blog" target="_blank"> <button class="csdn">
        <span class="hover-underline-animation"> csdn </span>
        <svg id="arrow-horizontal" xmlns="http://www.w3.org/2000/svg" width="30" height="10" viewBox="0 0 46 16">
          <path id="Path_10" data-name="Path 10"
            d="M8,0,6.545,1.455l5.506,5.506H-30V9.039H12.052L6.545,14.545,8,16l8-8Z" transform="translate(30)"></path>
        </svg>
      </button></a>
    <a href="https://gitee.com/ayi2020/projects" target="_blank"> <button class="csdn" style="margin-top: 25px;">
        <span class="hover-underline-animation"> Gitee </span>
        <svg id="arrow-horizontal" xmlns="http://www.w3.org/2000/svg" width="30" height="10" viewBox="0 0 46 16">
          <path id="Path_10" data-name="Path 10"
            d="M8,0,6.545,1.455l5.506,5.506H-30V9.039H12.052L6.545,14.545,8,16l8-8Z" transform="translate(30)"></path>
        </svg>
      </button></a>
  </section>
  <footer>
    <p>@2022-很高兴认识你</p>
  </footer>
</body>

</html>